<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .active {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- 
      prop数据是不能直接被修改的，要修改的话，需要通知父组件来修改。涉及到的问题就是，如何通知父组件

      组件上的事件：
        1. 组件内可以通过 组件实例上的一个 $emit 函数来触发一个自定义事件
        2. 父组件在调用子组件时，可以在标签上通过 v-on 来绑定该自定义事件

      $emit() 的语法：
        $emit(eventName[, payload])
          - eventName 要触发的自定义事件的名字
          - payload   触发事件时，传递过去的参数

      原生事件的事件处理函数与自定义事件的事件处理函数的不同：
        1. 原生事件处理函数在不加括号调用的情况下，会自动收到事件对象
        2. 自定义事件处理函数在不加括号调用的情况下，不会自动收到事件对象，而是一个 undefined

        PS: 
          1. 原生事件中 $event 这个特殊变量的值就是事件对象
          2. 自定义事件中 $event 这个特殊变量的值 是触发该自定义事件时传递过来的 payload


   -->
    <div id="app">
      <person :username="name" @change="handleChange"></person>

      <pagination
        :page-size="20"
        :current-page="page"
        @page-change="handlePageChange"
        @prev-click="handlePrevClick"
      ></pagination>

      <hr />

      <pagination
        :page-size="20"
        :total="21"
        :current-page="2"
        @page-change="handlePageChange"
      ></pagination>
    </div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const Person = {
        template: `
          <div>
            <p>姓名：{{ username }}</p> 
            <hr />
            <button @click="fn1">修改 username</button>
          </div>
        `,
        props: ["username"],
        methods: {
          fn1() {
            // 直接修改 prop 数据是不行的，
            // this.username = "里斯";

            // 可以触发一个 change 事件来通知父组件
            this.$emit("change", "zhangsan");
          },
        },
      };

      const Pagination = {
        template: `
          <div class="pagination">
            <button class="item" @click="$emit('prev-click')">Prev</button>
            <button 
              class="item" 
              :class="{ active: currentPage === item }" 
              v-for="item in totalPage" 
              @click="$emit('page-change', item)">
              {{ item }}
            </button>
            <button class="item" @click="$emit('next-click')">Next</button>
          </div>
        `,
        props: {
          // 每页显示的条数
          pageSize: {
            type: Number,
            default: 10,
          },
          // 总的条数
          total: {
            type: Number,
            default: 100,
          },
          // 当前页
          currentPage: {
            type: Number,
            default: 1,
          },
        },
        computed: {
          // 总的页数
          //    依赖项：pageSize、total
          totalPage() {
            return Math.ceil(this.total / this.pageSize);
          },
        },
      };

      const app = Vue.createApp({
        data() {
          return {
            page: 1,
            name: "张三",
          };
        },
        methods: {
          handleChange(event) {
            console.log("handleChange", event);
            // 修改自己的 name 数据
            // this.name = "里斯";
            this.name = event;
          },

          handlePageChange(page) {
            console.log("handlePageChange", page);
            // 获取到点击的 page 之后，重新在根据该page调用接口就ok了。

            this.page = page;
          },

          handlePrevClick() {
            console.log("上一页被点击了");
          },
        },
      });

      app.component("person", Person);
      app.component("pagination", Pagination);

      app.mount("#app");
    </script>
  </body>
</html>
